<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮动布局</title>
  <style>
    .fu {
      background-color: #ff0;
      /*子元素都浮动走,父元素会失高
      可以给父元素设置BFC结界,此时父元素会根据子元素浮动后的实际高度自动填充高度*/
      overflow: hidden;
    }
    .fu>div {
      width: 100px;
      height: 100px;
      border: 3px solid #f00;
    }
    .z1 {
      width: 100px;
      background-color: #0ffff0;
      /* 浮动元素会脱离文档流 不再占用文档流的布局空间 也就是不再支撑父元素的高度 */
      float: left;
    }
    .z2 {
      width: 200px;
      background-color: #0f0;
    }
    .z3 {
      width: 300px;
      background-color: #00f;
      float: right;
    }

  </style>
</head>
<body>
<!-- .fu>.z*3 -->
<div class="fu">
  <div class="z1">AAAAAAA</div>
  <div class="z2">BBBBBBBB</div>
  <div class="z3">CCCCCCCCCC</div>
</div>
</body>
</html>